<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<Lucilla.Playground.Website.Areas.Controls.Models.SlickGrid.SampleGrid1Model>" MasterPageFile="~/Views/Shared/Site.Master" %>
<%@ Import Namespace="Lucilla.Playground.Website.Extensions" %>

<asp:Content runat="server" ID="Title" ContentPlaceHolderID="TitleContent">
</asp:Content>
<asp:Content runat="server" ID="Style" ContentPlaceHolderID="StyleContent">
	<%= this.Css("smoothness/jquery-ui-1.8.custom")%>
	<%= this.Css("slick.pager")%>
	<%= this.Css("slick.grid")%>
	<%= this.Css("slick.columnpicker")%>
	<%= this.Css("slick-default-theme")%>
	<%= this.Css("custom-grid")%>
</asp:Content>
<asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
	<div id="sampleGrid" class="slickgrid">
	</div>
</asp:Content>
<asp:Content runat="server" ID="Scripts" ContentPlaceHolderID="ScriptContent">
	<%= this.Script("jquery-1.4.2.min")%>
	<%= this.Script("jquery-ui-1.8.custom.min")%>

	<%= this.Script("jquery.rule-1.0.1.1-min")%>
	<%= this.Script("jquery.event.drag.custom")%>
	<%= this.Script("slick.editors")%>
	<%= this.Script("slick.grid")%>
	<%= this.Script("slick.model")%>
	<%= this.Script("slick.lucilla.editors")%>
	<script type="text/javascript">
		var gridDataView;
		var gridRowCounter = 100;
		
		function gridUpdateItem(value,columnDef,item) {
			item[columnDef.field] = value;
			gridDataView.updateItem(item.id,item);
		}
		
		function gridAddNewItem(columnDef,value) {
			gridRowCounter = gridRowCounter+1;
			var item = { 'id':gridRowCounter, 'RowNum': gridRowCounter};
			item[columnDef.field] = value;
			gridDataView.addItem(item);
		};        
		
		// Griglia Iva
		$(function() {
			var columns = <%= Model.ColumnsSource %>;
			var options = {
				editable: true,
				enableAddRow: true,
				enableCellNavigation: true,
				asyncEditorLoading: false,
				rowHeight: 24
			};
			
			// initialize the model
			gridDataView = new Slick.Data.DataView();
			gridDataView.beginUpdate();
			gridDataView.setItems(<%= Model.GridData %>);
			gridDataView.endUpdate();
			var sampleGrid = new Slick.Grid($("#sampleGrid"), gridDataView.rows, columns, options);
			sampleGrid.onAddNewRow = gridAddNewItem;
			
			// wire up model events to drive the grid
			gridDataView.onRowCountChanged.subscribe(function(args) {
				sampleGrid.updateRowCount();
			});

			gridDataView.onRowsChanged.subscribe(function(rows) {
				sampleGrid.removeRows(rows);
				sampleGrid.render();
			});
		});
	</script>
</asp:Content>
